import { useAppDispatch } from "@/store";
import { setPanes, useCommonState, Tpane, removePanes } from "@/store/modules/common";
import { getRouteTilte } from "@/utils";
import { Layout, Tabs } from "antd";
import locale from "antd/lib/date-picker/locale/en_US";
import { useEffect, useState } from "react";
import { matchPath, Outlet, useLocation, useNavigate } from "react-router-dom";
import "./index.less";
const { Content } = Layout;
const { TabPane } = Tabs;



export default function IndexContent() {
    const location = useLocation();
    const navigate = useNavigate();
    const dispatch = useAppDispatch();
    const { panes } = useCommonState();
    useEffect(() => {
        const { subTitle = "主页"} = getRouteTilte(location.pathname);
        dispatch(setPanes({
            title: subTitle,// 标签页的标题
            key: location.pathname
        }))
    }, [location.pathname])
    const onEdit = (targetKey: string, action: 'add' | 'remove') => {
        if (action === "remove") {
            // 当前点击关闭标签所在的下标
            const index = panes.findIndex((v: Tpane) => v.key === targetKey);
            // 删除标签操作
            dispatch(removePanes(index));
            // 进行路由的跳转
            navigate(panes[index - 1].key);

        }
    };
    return (
        <Content style={{ margin: '5px' }}>
            <div className="site-layout-background" style={{ height: "100%" }}>
                <Tabs hideAdd
                    onChange={activeKey => navigate(activeKey)}
                    activeKey={location.pathname}
                    type="editable-card"
                    onEdit={onEdit as any}
                >
                    {panes.map((pane: Tpane) => (
                        <TabPane closable={pane.closable} tab={pane.title} key={pane.key}>
                            {
                                // 判断当前地址与pane.key是否相同，如果相同渲染对应的路由组件。
                                location.pathname === pane.key && <Outlet />
                            }
                        </TabPane>
                    ))}

                </Tabs>

            </div>
        </Content>
    )
}